import React from 'react';
import {Control} from "react-keeper";

require('./PageRegister.less');

import Reflux from 'reflux';
import {Button, Picker, List, InputItem, NavBar, Flex, WhiteSpace, WingBlank} from 'antd-mobile';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import StorageUtils from "../../../app/storage";
const Item = List.Item;

class Register extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      certNumEditable: true,
      identifyingCodeEditable: false,
      identifyingButton: {
        value: '获取验证码',
        disabled: true,
        expireTime: 0
      },
      registerDisabled: true
    };

    this.changeCertNum = this.changeCertNum.bind(this);
    this.enterInfo = this.enterInfo.bind(this);
    this.goHome = this.goHome.bind(this);
    this.onInputCertNum = this.onInputCertNum.bind(this);
    this.onBlurCertNumber = this.onBlurCertNumber.bind(this);
    this.onInputIdentifyingCode = this.onInputIdentifyingCode.bind(this);
    this.sendIdentifyingCode = this.sendIdentifyingCode.bind(this);
    this.doValidate = this.doValidate.bind(this);
  }

  goHome() {
    Control.go('/home/user/my', null);
  }

  changeCertNum(e) {
    Actions.changeCertNum(e);
  }

  onInputCertNum(e) {
    Actions.onInputCertNum(e);
  }

  onBlurCertNumber(e) {
    Actions.onBlurCertNumber(e);
  }

  onInputIdentifyingCode(e) {
    Actions.onInputIdentifyingCode(e);
  }

  sendIdentifyingCode() {
    Actions.sendIdentifyingCode();
  }

  doValidate() {
    Actions.doValidate();
  }

  enterInfo() {
    /*Actions.checkCertNum();*/
    Actions.enterInfo();
  }

  render() {

    return (
      <div className="btn-container">
        <NavBar mode="dark">信息认证</NavBar>
        <List renderHeader={() => '请如实填写身份证号码，我们将进行后台身份信息匹配，然后发送验证码到网格员登记的手机号。如果没有收到短信验证码，请联系网格员补录手机号码。'}>
          <Flex>
            <Flex.Item>
              <InputItem
                editable={this.state.reg.inputStatus.certNumEditable}
                maxLength="18"
                placeholder="请输入您的身份证号码"
                onChange={this.onInputCertNum}
                onBlur={this.onBlurCertNumber}
                value={this.state.reg.inputStatus.certNum}
              >身份证号</InputItem>
            </Flex.Item>
          </Flex>
          <Flex>
            <Flex.Item style={{flex: 'none', width: '60%'}}>
              <InputItem
                type="text"
                placeholder="输入验证码"
                value={this.state.reg.inputStatus.identifyingCode}
                editable={this.state.reg.inputStatus.identifyingCodeEditable}
                maxLength="6"
                onChange={this.onInputIdentifyingCode}
              >
                验证码
              </InputItem>
            </Flex.Item>
            <Flex.Item>
              <Button
                type="primary"
                size="small"
                disabled={this.state.reg.inputStatus.identifyingButton.disabled}
                inline onClick={this.sendIdentifyingCode}>{this.state.reg.inputStatus.identifyingButton.value}</Button>
            </Flex.Item>
          </Flex>
          <WhiteSpace size="lg" />

          {/*<InputItem
            value={this.state.reg.info.name}
            editable={false}
          >姓名</InputItem>*/}
          {/*<InputItem
            type="phone"
            editable={this.state.reg.info.editable}
            placeholder={this.state.reg.info.tel}
          >手机号码</InputItem>*/}
        </List>
        <WingBlank>
          <Button type="primary" disabled={this.state.reg.inputStatus.registerDisabled} onClick={this.doValidate}>认证</Button>
        </WingBlank>
      </div>
    );
  }

  componentWillMount() {
    // Actions.initMode();
    Actions.initInfo();
  }

  componentWillUnmount() {
    /*alert('componentDidUnMount');
    if (StorageUtils.getStorageItem('ExpireTime')) {
      StorageUtils.removeStorageItem('ExpireTime');
    }*/
  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state.reg || {};
    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }

}

ReactMixin.onClass(Register, Reflux.connect(Store, 'reg'));


export default Register ;
